/*
 * @Author: xiehangyun 
 * @Date: 2025-05-15 13:42:20 
 * @Last Modified by: 肖思汗
 * @Last Modified time: 2025-07-02 10:39:30
 */




import { View } from "@tarojs/components";
import { autorun } from "mobx";
import { useEffect, useRef, useState } from "react";
import { ReceiveAddress } from "types/type";
import styles from "./addressCard.module.less";

import Taro from '@tarojs/taro';
import addressManageStore from "../addressManageStore";
import clsx from "clsx";

// provinceName: string; // 省份名称，例如 "广东省"
// cityName: string; // 城市名称，例如 "广州市"
// countyName: string; // 区县名称，例如 "海珠区"
// detailInfo: string; // 详细地址信息，例如 "新港中路397号"
// errMsg: string; // 接口调用结果信息，例如 "chooseAddress:ok"
// nationalCode: string; // 国家编码，例如 "510000"
// postalCode: string; // 邮政编码，例如 "510000"
// telNumber: string; // 电话号码，例如 "020-81167888"
// userName: string; // 用户姓名，例如 "张三"

// 地址卡片
export default function AddressCard(props: ReceiveAddress) {

    const [selectMode, setSelectMode] = useState(addressManageStore.selectMode);

    const [selectedAddressId, setSelectedAddressId] = useState<number | string>(addressManageStore.selectedAddressId);

    const dom = useRef<HTMLDivElement | null>(null);
    const [data, setData] = useState({});

    useEffect(() => {
    }, []);

    useEffect(() => autorun(() => {
        setSelectMode(addressManageStore.selectMode);
        setSelectedAddressId(addressManageStore.selectedAddressId);
    }, { delay: 30 }), []);

    /**
     * 显示确认对话框以提示用户是否真的想要删除地址
     * 如果用户确认删除，则调用地址管理存储中的删除方法来删除地址
     */
    const handleDelete = () => {
        // 使用Taro的模态对话框组件显示删除确认对话框
        Taro.showModal({
            title: '删除地址',
            content: '确定要删除这个地址吗？',
            success: (res) => {
                // 如果用户点击了确认按钮，则调用删除方法
                if (res.confirm) {
                    addressManageStore.delete(props.appAddressId);
                }
            }
        });
    };

    // 修改地址
    const handleEdit = () => {
        console.log("修改地址");
        Taro.navigateTo({
            url: `/subPages/NewAddressManage/NewAddressManage?appAddressId=${props.appAddressId}`
        });
    };

    return (
        <View
            className={clsx(styles.addressCard, (selectMode && props.appAddressId === selectedAddressId) ? styles.selected : "")}
            onClick={() => {
                if (selectMode) {
                    addressManageStore.setSelectedAddressId(props.appAddressId);
                }
            }}
        >
            <View className={styles.cardHeader}>
                <View className={styles.namePhone}>
                    <View className={styles.name}>{props.userName}</View>
                    <View className={styles.phone}>{props.phone}</View>
                </View>
                {
                    !selectMode &&
                    <View className={styles.deleteIcon} onClick={handleDelete}>×</View>
                }
            </View>
            <View className={styles.address}>
                {props.province}{props.city}{props.county}{props.detail}
            </View>
            <View className={styles.actions}>
                <View className={styles.defaultSelector}>
                    {props.ifDefault ? (
                        <View className={styles.radioChecked} />
                    ) : (
                        <View
                            className={styles.radioUnchecked}
                            onClick={() => {
                                addressManageStore.updata({
                                    ...props,
                                    ifDefault: true
                                });
                            }} />
                    )}
                    <View className={clsx(styles.defaultText, props.ifDefault && styles.active)}>
                        {props.ifDefault ? "已设默认" : "默认"}
                    </View>
                </View>
                <View className={`${styles.actionButton} ${styles.edit}`} onClick={handleEdit}>修改</View>
            </View>
        </View>
    );
}